<script setup>
	import { ref, onMounted } from "vue";
	import { listApi } from '@/apis/task.js'
	// 1.  定义在途任务列表数据
	const list = ref([])

	// 2.  获取在途任务
	const getList = async () => {
		const { data } = await listApi(2)
		console.log('在途任务：', data)
		list.value = data.items || []
	}
	// 3.  发送请求
	onMounted(() => {
		getList()
	})
</script>
<template>
	<scroll-view scroll-y class="scroll-view">
		<view class="scroll-view-wrapper">
			<view v-for="delivery in list" :key="delivery.id" class="task-card">
				<navigator hover-class="none" :url="`/subpkg_task/detail/index?id=${delivery.id}`">
					<view class="header">
						<text class="no">任务编号: {{ delivery.transportTaskId }}</text>
					</view>
					<view class="body">
						<view class="timeline">
							<view class="line">{{ delivery.startAddress }}</view>
							<view class="line">{{ delivery.endAddress }}</view>
						</view>
					</view>
				</navigator>
				<view class="footer">
					<view class="label">到货时间</view>
					<view class="time">{{ delivery.planArrivalTime }}</view>
					<!-- 					<navigator hover-class="none" :url="`/subpkg_task/delivery/index?id=${delivery.id}`" class="action">
						交付
					</navigator> -->
					<!-- 交付前 -->
					<navigator v-if="delivery.status === 2" hover-class="none"
						:url="`/subpkg_task/delivery/index?id=${delivery.id}`" class="action">
						交付
					</navigator>
					<!-- 已交付=> 显示回车登记 -->
					<navigator v-if="delivery.status === 4" hover-class="none"
						:url="`/subpkg_task/record/index?transportTaskId=${delivery.transportTaskId}&actualDepartureTime=${delivery.actualDepartureTime}`"
						class="action">
						回车登记
					</navigator>

				</view>
			</view>
			<view v-if="list.length === 0" class="task-blank">无在途货物</view>
		</view>
	</scroll-view>
</template>

<style lang="scss" scoped>
	@import './styles.scss';
</style>